<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>ichartjs 示例</title>
		<meta name="Description" content="The ichartjs's gallery center,ichartjs 示例中心" />
		<meta name="Keywords" content="ichartjs demo,Html5 demo,ichartjs示例,ichartjs示例,Html5示例,Html5示例" />
		<script type="text/javascript" src="../../ichart.1.2.min.js"></script>
		<link rel="stylesheet" href="../css/demo.css" type="text/css"/>
		<style type="text/css">
			body {
				margin-top:0px;
			}
		</style>
		<script type="text/javascript">
		$(function(){
		    var data = [
						{name : 'MISE',value : 55.11,color : '#4572a7'},
						{name : 'Firefox',value : 29.84,color : '#aa4643'},
						{name : 'Chrome',value : 24.88,color : '#89a54e'},
						{name : 'Safari',value : 6.77,color : '#80699b'},
						{name : 'Opera',value : 2.02,color : '#3d96ae'}
					];
					
			var chart = new iChart.Column2D({
				render : 'canvasDiv',
				data : data,
				title : {
					text : 'This is a sample spirit from HighCharts',
					color : '#3e576f',
					height:40,
					fontsize:30
				},
				subtitle : {
					text : 'Browser market share,April,2011 from 1 to 29 Feb 2012',
					color : '#6d869f',
					fontsize:22
				},
				footnote : {
					text : 'ichartjs.com',
					color : '#909090',
					fontsize : 11,
					padding : '0 38'
				},
				fit:true,
				label : {
					fontsize:16,
					fontweight:600,
					color : '#666666'
				},
				shadow : true,
				shadow_blur : 2,
				shadow_color : '#aaaaaa',
				shadow_offsetx : 1,
				shadow_offsety : 0,
				sub_option : {
					listeners : {
						parseText : function(r, t) {
							return t + "%";
						}
					},
					label : {
						fontsize:16,
						fontweight:600,
						color : '#4572a7'
					},
					border : {
						width : 2,
						color : '#ffffff'
					}
				},
				coordinate : {
					background_color : null,
					grid_color : '#c0c0c0',
					width : '75%',
					height : '65%',
					axis : {
						color : '#c0d0e0',
						width : [0, 0, 1, 0]
					},
					scale : [{
						position : 'left',
						start_scale : 0,
						end_scale : 60,
						scale_space : 10,
						scale_enable : false,
						label : {
							fontsize:16,
							fontweight:600,
							color : '#666666'
						}
					}]
				}
			});
			
			/**
			 *利用自定义组件构造左侧说明文本。
			 */
			chart.plugin(new iChart.Custom({
					drawFn:function(){
						/**
						 *计算位置
						 */	
						var coo = chart.getCoordinate(),
							x = coo.get('originx'),
							y = coo.get('originy'),
							H = coo.height;
						/**
						 *在左侧的位置，设置逆时针90度的旋转，渲染文字。
						 */
						chart.target.textAlign('center')
						.textBaseline('middle')
						.textFont('600 20px Verdana')
						.fillText('Total percent market share',x-60,y+H/2,false,'#6d869f', false,false,false,-90);
						
					}
			}));
			chart.on('beforedraw',function(e){
				chart.START_RUN_TIME = new Date().getTime();
				return true;
			});
			
			chart.on('draw',function(e){
				chart.END_RUN_TIME = new Date().getTime();
				chart.RUN_TIME_COST = chart.END_RUN_TIME - chart.START_RUN_TIME;
				$("#ichartjs_result").innerHTML = chart.RUN_TIME_COST+"ms";
			});
			chart.draw();
		});
	</script>
</head>
<body>
	<div id='canvasDiv'></div>
	<div id='ichartjs_result'></div>
</body>
</html>
